<template>
  <div class="div1">
    <div class="div2">
      <svg class="icon" @click="isShowMenu" aria-hidden="true">
        <use xlink:href="#icon-menu-copy"></use>
      </svg>
   
        <el-dropdown trigger="click">
          <span class="el-dropdown-link">
            <span style="display: flex; align-items: center"
              ><img
                :src="
                  'http://localhost:3000' + Store.NowLoginuser.avator ||
                  '/userimg.jpg'
                "
                alt=""
              /><span>admin</span></span
            >
          </span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item :icon="Plus" @click="loginout">退出登入</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
    </div>
  </div>
</template>

<script setup>
import { useStore } from "@/stores/counter.js";
import { useRouter } from "vue-router";
const Router = useRouter()
const Store = useStore();
function isShowMenu() {
  Store.isShowMenu = !Store.isShowMenu;
}
const loginout = ()=>{
   localStorage.removeItem('token')
   localStorage.removeItem('counter')
   Router.push('/login')

}
</script>

<style scoped>
.el-dropdown-link {
  color: rgba(141, 38, 38, 1);
  display: flex;
  font-weight: 800;
}
img {
  height: 40px;
  width: 40px;
  border-radius: 50%;
}
.div1 {
  display: flex;
  width: 100%;
  height: 50px;
  background: rgba(61, 118, 153, 0.966);
}
.div2 {
  margin: 0 10px;
  flex: 1;
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  justify-content: space-between;
}
.icon {
  display: none;
  width: 30px;
  height: 30px;
  vertical-align: -0.15em;
}
@media (max-width: 450px) {
  .icon {
    display: block;
  }
  .div2{
    display: flex;
  align-items: center;
  flex-direction: row;
  justify-content: space-between;
  }
}
</style>